import { styled } from "@mui/material";

type Position = {
	position: "left" | "right";
};

export const HeaderWrapper = styled("header")(({ theme }) => ({
	padding: "10px",
	width: "100%",
	height: "50px",
	display: "flex",
	alignItems: "center",
	justifyContent: "space-between",
	background: theme.background.header,
}));

export const HeaderLogo = styled("h3")(({ theme }) => ({
	margin: 0,
	width: "100%",
	fontWeight: "400",
	fontSize: "18px",
	lineHeight: "18px",
	letterSpacing: "-0.08px",
	color: theme.text.logo,
}));

export const HeaderBlock = styled("div")<Position>(({ position }) => ({
	width: position === "left" ? "70%" : "30%",
	height: "100%",
	display: "flex",
	alignItems: "center",
	justifyContent: position === "left" ? "flex-start" : "flex-end",
}));
